<template>
  <div class="login-plugin">
        <div class="login-content">
            <h2>
                <img src="../../assets/icons/logodark.png">
            </h2> 
            <!-- <div class="close-icon">
                <i class="el-icon-circle-close" @click="closeLogin"></i>
            </div> -->
            <div class="login-title" >Login</div>
            <div class="key-label" >Key</div>
            <div class="input-key">
                <input class="input-style" v-model="loginKey" type="text" id="sc-name" name="username" autocomplete="off" tabindex="1"> 
                <div id="sc-login-info-success" ></div>
                <div id="sc-login-info" ></div>
            </div>
            <div class="login-button" >
                <button id="btn-sc-login" @click="toLogin">Login</button>
            </div> 
            <!-- onmouseover="this.style.border='1px solid #00A289\'" onmouseout="this.style.border=\'1px solid transparent\'" -->
            <div class="protocol">登录即同意Share Creators的 
                <a href="/static/html/policy.html" target="_blank" > 隐私政策</a>
                和
                <a href="static/html/terms.html" target="_blank" > 服务条款</a>
            </div> 
        </div>
        <div class="close-sharecreators-not-open-modal" id="not-opened-modal-overlay" @click="closeLogin"> 
        </div> 
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { keyLogin,  } from '@/api/login'
export default {
    name: "LoginPlugin",
    data(){
        return{
            loginKey: ''
        }
    },
    computed:{
        ...mapState('globalConfig', ['baseUrl']),
        ...mapState('user', ['loginInfo'])

    },
    methods:{
        ...mapMutations('globalConfig', ['setBaseUrl']),
        ...mapMutations('user', ['setLoginInfo']),

        closeLogin(){
            console.log("准备关闭了")
            this.$EventBus.$emit("changeCompant", 'Popup')
        },
        async initConfig(){
            console.log("执行登录初始化")
            let that =  this
            if(chrome && chrome.storage && chrome.storage.local){
                console.log("使用chrome.storage 获取登录信息")
                chrome.storage.local.get(["bid", "token","loginInfo"]).then((result) => {
                    if(result.loginInfo){
                        that.setLoginInfo(JSON.parse(result.loginInfo))
                        // 重定向到登录页面
                        that.$EventBus.$emit('changeCompant', 'Popup')
                    }
                });
            }

        },
        async toLogin(){
            try{
                if(chrome && chrome.storage && chrome.storage.sync){
                    console.log("使用chrome.storage 存储登录信息")
                    chrome.storage.sync.set({bid: 'bid', token: 'token'}, function() {console.log('保存成功！');
                    });
                }
                const  keyObj = JSON.parse(atob(this.loginKey));  
                console.log(keyObj)
                const params = {
                    loginKey: this.loginKey,
                    keyType:  "CHROME_PLUGIN"
                }
                this.setBaseUrl(atob(keyObj.baseUrl))  
                await chrome.storage.local.set({baseUrl: this.baseUrl})
                const {code, data} = await keyLogin(params )

                if(code == 0){
                    if(chrome && chrome.storage && chrome.storage.local){
                        let that = this
                        let res = await getConfig()
                        if(res.code == 0){
                        //console.log("使用chrome.storage 存储登录信息")
                        let saveObj = { bid: data.bid, token: data.token , 
                            loginInfo: JSON.stringify(data), loginKey: this.loginKey,
                            storageMode: res.data.storageMode && res.data.storageMode == 'LOCAL' ? 'LOCAL' : 'oss',
                            baseUrl: this.baseUrl}
                            chrome.storage.local.set(saveObj).then(() => {
                                that.$EventBus.$emit('changeCompant', 'Popup')
                            });
                        }

                    }
                    this.setLoginInfo(data)

                    // 获取系统配置信息

                }
            }catch(e){
                this.$message.error({
                    message: e.msg, 
                    customClass: 'el-message-index'
                })
            }
            if(!this.loginKey) return

        }
    },
    created(){
        // this.initConfig()
    }
}
</script>

<style scoped lang="scss">
    .login-plugin{
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        z-index: 99999999 !important;

        .login-content{
            overflow: hidden; 
            z-index: 99999998 !important; 
            position: relative !important; 
            top: 50% !important; 
            left: 50% !important;
            transform: translateX(-50%) translateY(-50%) !important; 
            width:300px !important; 
            background-color: #323642 !important; 
            border-radius: 4px; 
            padding: 24px;
            h2{
                font-size: 18px;
                color: #ffffff; 
                text-align: left;
                img{
                    width: 110px;
                }
            }

            .close-icon{
                position: absolute;
                right: 12px;
                top: 12px;
                height: 40px;
                width: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-size: 20px;
                color: #D1D1D1;

                &:active{
                    opacity: 0.6;
                }

            }
            
            .login-title{
                color: #D1D1D1;
                text-align: center; 
                font-size: 18px; 
                margin: 40px 0;
                font-weight: bold;
            }
            .key-label{
                text-align:left; 
                font-size:14px;
                color:#D1D1D1;
                margin-bottom: 12px;
            }

            .input-key{
                width: 100%;
                position: relative;


                .input-style{
                    width: calc(100% - 20px); 
                    color: #d1d1d1;
                    vertical-align: middle;
                    border-radius: 5px;
                    background: #2B2E39;
                    border:1px solid transparent;
                    height: 40px; 
                    padding: 0 10px;
                    outline: none;

                    &:focus{
                        border: 1px solid #00A289;
                    }
                }
                .sc-login-info-success{
                    position: absolute;
                    top:44px;
                    left: 0;
                    height:20px;
                    color: #00A289;
                }

                .sc-login-info{
                    position: absolute;
                    top:44px;
                    left: 0;
                    height:20px;
                    color:#ff6969;  
                }

                &:hover{
                   .input-style{
                    border: 1px solid #00A289;
                   } 
                }

              
            }
            .login-button{
                text-align: center; 
                width: 100%; 
                margin-top: 60px;
                cursor: pointer;

                #btn-sc-login{
                    color: white; 
                    outline: none !important;
                    border: none;
                    width:100%; 
                    height:40px; 
                    background: #00A289; 
                    text-align: center;
                    cursor: pointer;
                }
            }

            .protocol{
                color:#888C99;
                margin-top: 50px;

                a{
                    text-decoration: none;
                    color:#00A289; 
                }
            }
        }

        .close-sharecreators-not-open-modal{
            cursor: pointer; 
            z-index: 99999997 !important; 
            position: absolute !important; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background: rgba(0,0,0,0.4) !important;
        }
    }
</style>